<template>
  <div class="order-box">
    <nav-bar class="header">
      <div slot="left" @click="goBack" class="back-icon">
        <img src="~assets/img/common/back.svg" alt="">
      </div>
      <div slot="center">我的订单</div>
    </nav-bar>
    <van-tabs
      @change="onChangeTab"
      :color="'#ff5777'"
      :title-active-color="'#ff5777'" class="order-tab" 
      v-model="status"
      
    >
      <van-tab title="全部" name=''></van-tab>
      <van-tab title="待付款" name="0"></van-tab>
      <van-tab title="待确认" name="1"></van-tab>
      <van-tab title="待发货" name="2"></van-tab>
      <van-tab title="已发货" name="3"></van-tab>
      <van-tab title="交易完成" name="4"></van-tab>
    </van-tabs>
    <van-pull-refresh 
      v-model="refreshing"
      @refresh="onRefresh"
      class="order-list-refresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        @offset="300"
      >
        <div v-for="(item, index) in list" :key="index" class="order-item-box" @click="goTo(item.orderNo)">
          <div class="order-item-header">
            <span>订单时间：{{ item.createTime }}</span>
            <span>{{ item.orderStatusString }}</span>
          </div>
          <van-card
            v-for="one in item.newBeeMallOrderItemVOS"
            :key="one.orderId"
            :num="one.goodsCount"
            :price="one.sellingPrice"
            desc="全场包邮"
            :title="one.goodsName"
            :thumb="prefix(one.goodsCoverImg)"
          />
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import Vue from 'vue';
import { Tab, Tabs ,List,PullRefresh ,Card} from 'vant';


import { getOrderList } from 'network/order'
import { perfix } from 'common/utils'
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(PullRefresh);
Vue.use(List);
Vue.use(Card);
export default {
  name:'order',
  data() {
    return {
      status: '',
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
      page: 1
    }
  },
  components:{
    NavBar
  },
  methods: {
    async loadData() {
      const { data, data: { list } } = await getOrderList({
        pageNumber: this.page, status: this.staus
      })
      this.list = this.list.concat(list)
      this.totalPage = data.totalPage
      this.loading = false
      if (this.page >= data.totalPage) this.finished = true
    },
    goBack(){
      this.$router.go(-1);
    },
    goTo(id){
      this.$router.push({ path: `order-detail?id=${id}` })
    },
    onChangeTab(name,title){
      this.staus = name
      this.onRefresh()
    },
    onLoad() {
      if(!this.refreshing && this.page < this.totalPage) {
        this.page = this.page + 1
      }

      if(this.refreshing) {
        this.list = []
        this.refreshing = false
      }

      this.loadData()
    },
    onRefresh() {
      this.refreshing = true
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.page = 1
      this.onLoad();
    },
  }
}
</script>

<style lang="less" scoped>
  .order-box {
    width: 100vw;
    .order-tab {
      position: fixed;
      left: 0;
      z-index: 1000;
      width: 100%;
      top: 43px;
    }
    .order-list-refresh {
      margin-top: 68px;
      .van-card__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .van-pull-refresh__head {
        background: #f9f9f9;
        padding-top: 20px;
      }
      .van-list {
        min-height: calc(100vh - 88px);
        background: #f9f9f9;
        margin-top: 20px;
      }
      .order-item-box {
        margin:20px 10px;
        background-color: #fff;
        
        .order-item-header {
          padding: 10px 20px 0 20px;
          display: flex;
          justify-content: space-between;
          font-size: 14px;
        }
        .van-card {
          background-color: #fff;
          margin-top: 0;
        }
      }
    }
  }
</style>
